<div class="roles_box">
  <!-- 面包屑模块 -->
  <el-row>
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>权限管理</el-breadcrumb-item>
      <el-breadcrumb-item>角色列表</el-breadcrumb-item>
    </el-breadcrumb>
  </el-row>

  <!-- 添加角色按钮 -->
  <el-row class="add_box">
    <el-button @click="() => this.addRolesDialog = true" type="warning">添加角色</el-button>
  </el-row>

  <!-- 带有二级展开的表格 -->
  <el-row class="rolesList_box">
    <el-table
    :data="rolesList"
    style="width: 100%">
    <el-table-column type="expand">
      <template slot-scope="data">
        <!-- 二级展开项 -->
        <el-row class="first" v-for="first in data.row.children" :key="first.id">
          <el-col :span="4">
            <el-tag closable >{{ first.authName }}</el-tag>
          </el-col>
          <el-col :span="20">
            <!-- 二级权限 -->
            <el-row class="second" v-for="second in first.children" :key="second.id">
              <el-col :span="4">
                <el-tag closable type="warning">{{ second.authName }}</el-tag>
              </el-col>
              <el-col :span="20">
                <!-- 三级权限 -->
                <el-col
                  :span="4"
                  type="success"
                  class="third"
                  v-for="third in second.children"
                  :key="third.id">
                  <el-tag closable >{{ third.authName }}</el-tag>
                </el-col>
              </el-col>
            </el-row>
          </el-col>
        </el-row>
      </template>
    </el-table-column>
    <el-table-column
      label="序号"
      type="index"
      width="70">
    </el-table-column>
    <el-table-column
      label="角色名称"
      prop="roleName"
      width="120">
    </el-table-column>
    <el-table-column
      label="角色描述"
      prop="roleDesc"
      width="200">
    </el-table-column>
    <!-- 操作表格 -->
    <el-table-column label="操作">
      <template slot-scope="data">
        <el-tooltip class="item" effect="dark" content="编辑"placement="left">
          <!-- 编辑按钮 -->
          <el-button
            @click="showEditInfoDialog(data.row)"
            icon="el-icon-edit"
            size="mini"
            type="success"
            circle >
          </el-button>
        </el-tooltip>
        <el-tooltip class="item"effect="dark" content="删除"placement="top">
          <!-- 删除按钮 -->
          <el-button
            @click="deleteRolesHandler(data.row.id)"
            icon="el-icon-delete"
            size="mini"
            type="danger"
            circle >
          </el-button>
        </el-tooltip>
        <el-tooltip class="item"effect="dark" content="分配权限"placement="right">
          <!-- 权限分配 -->
          <el-button
            @click="showEditRightsHandler(data.row.children, data.row.id)"
            icon="el-icon-setting"
            size="mini"
            type="primary"
            circle >
          </el-button>
        </el-tooltip>
      </template>
    </el-table-column>
  </el-table>
  </el-row>

  <!-- 添加角色对话框 -->
  <el-dialog @closed="closeAddRolesDialog" title="添加角色" :visible.sync="addRolesDialog">
    <el-form ref="addRoles" :rules="addRolesRules" :model="addRolesInfo">
      <el-form-item label="角色名称" prop="roleName" label-width="800">
        <el-input v-model="addRolesInfo.roleName" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="角色描述" prop="roleDesc" label-width="800">
        <el-input v-model="addRolesInfo.roleDesc" autocomplete="off"></el-input>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <!-- 点击取消按钮的时候, 关闭对话框 -->
      <el-button @click="() => this.addRolesDialog = false">取 消</el-button>
      <!-- 点击确认添加角色按钮 -->
      <el-button @click="addRolesHandler" type="success">添加角色</el-button>
    </div>
  </el-dialog>

  <!-- 编辑权限信息对话框 -->
  <el-dialog title="编辑角色" :visible.sync="editRolesInfoDialog">
    <el-form ref="editRoles" :rules="addRolesRules" :model="aditRolesInfo">
      <el-form-item label="角色名称" prop="roleName" label-width="800">
        <el-input v-model="aditRolesInfo.roleName" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="角色描述" prop="roleDesc" label-width="800">
        <el-input v-model="aditRolesInfo.roleDesc" autocomplete="off"></el-input>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <!-- 点击取消按钮的时候, 关闭对话框 -->
      <el-button @click="() => this.editRolesInfoDialog = false">取 消</el-button>
      <!-- 点击确认编辑按钮 -->
      <el-button @click="editRolesInfoHandler" type="success">确认编辑</el-button>
    </div>
  </el-dialog>

  <!-- 分配权限对话框 -->
  <el-dialog @close="closeRightsDialog" title="分配权限" :visible.sync="editRightsDialog">
    <!-- 树状菜单 -->
    <el-tree
      ref="rightsTree"
      v-if="editRightsDialog"
      :data="rightsList"
      show-checkbox
      node-key="id"
      :default-expanded-keys="expendRightsList"
      :default-checked-keys="[checkedRightsList]"
      :props="rightsTreeInfo">
    </el-tree>
    <div slot="footer" class="dialog-footer">
      <!-- 点击取消按钮的时候, 关闭对话框 -->
      <el-button @click="() => this.editRightsDialog = false">取 消</el-button>
      <!-- 点击确认编辑按钮 -->
      <el-button @click="editRightsHandler">确认权限分配</el-button>
    </div>
  </el-dialog>
</div>